import React from 'react';
import PropTypes from 'prop-types';
import MyECharts from '@components/my-echarts';
import _ from 'lodash';

const SitesTrend = props => {
  const { data = [] } = props;

  let trendDate = [],
    sitesTrend = [],
    vulSitesTrend = [],
    availableSitesTrend = [];
  let defaultData = new Array(30).fill(0);

  data.forEach(item => {
    const date = _.get(item, 'date_format').slice(5);
    if (!date || trendDate.indexOf(date) !== -1) {
      return;
    }
    trendDate.unshift(date);
    sitesTrend.unshift(_.get(item, 'sites', 0));
    vulSitesTrend.unshift(_.get(item, 'site_with_vuls', 0));
    availableSitesTrend.unshift(_.get(item, 'ips.available', 0));
  });

  const getColorStop = value => {
    const itemStyle = {
      width: 2,
      color: {
        type: 'linear',
        x: 1,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: `rgba(${value}, 1)`
          },
          {
            offset: 0.001,
            color: `rgba(${value}, 0.1)`
          },
          {
            offset: 0.2,
            color: `rgba(${value}, 0.7)`
          },
          {
            offset: 0.5,
            color: `rgba(${value}, 1)`
          },
          {
            offset: 0.8,
            color: `rgba(${value}, 0.7)`
          },
          {
            offset: 1,
            color: `rgba(${value}, 0.1)`
          }
        ],
        global: false
      }
    };
    return itemStyle;
  };

  let option = {
    textStyle: {
      color: '#ffffff'
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '12%',
      left: '15%',
      containLabel: false
    },
    legend: {
      data: ['资产总数', '可用资产', '漏洞影响资产'],
      bottom: '0',
      icon: 'rect',
      itemHeight: 2,
      itemWidth: 10,
      textStyle: {
        color: '#ffffff'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: false,
      axisTick: false,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      data: trendDate
    },
    yAxis: {
      type: 'value',
      axisLine: false,
      axisTick: false,
      splitLine: false,
      minInterval: 1
    },
    series: [
      {
        name: '资产总数',
        data: sitesTrend.length ? sitesTrend : defaultData,
        showSymbol: false,
        type: 'line',
        itemStyle: getColorStop('255, 255, 255')
      },
      {
        name: '可用资产',
        data: availableSitesTrend.length ? availableSitesTrend : defaultData,
        showSymbol: false,
        type: 'line',
        itemStyle: getColorStop('245, 223, 62')
      },
      {
        name: '漏洞影响资产',
        data: vulSitesTrend.length ? vulSitesTrend : defaultData,
        showSymbol: false,
        type: 'line',
        itemStyle: getColorStop('202, 47, 47')
      }
    ]
  };

  return <MyECharts option={option} />;
};

SitesTrend.propTypes = {
  data: PropTypes.array
};

export default SitesTrend;
